<template>
  <div>
    <checked-title title="部件类案件汇总" />
    <div class="anjianCharts" id="anjianCharts" ref="anjianCharts" style="height: 300px"></div>
  </div>
</template>

<script>
import { BuJianMapDB } from '@/api'

export default {
  data() {
    return {
      datalist: []
    }
  },

  mounted() {
    this.anjianHuizongList();
  },

  beforeDestroy() {
    this.desHander()
  },

  methods: {
    // 案件汇总列表
    anjianHuizongList() {
      BuJianMapDB.getBaseOrderNum().then(res => {
        this.datalist = res.data;
        this.initChart();
      })
    },

    initChart() {
      let XaxioName = [] //名字数组
      let baseNum = [] //部件数量
      let orderNum = [] //关联案件数量
      let orderLv = [] //部件案件率
      this.datalist.forEach(item => {
        if (item.name.length > 4) {
           XaxioName.push(`${item.name.slice(0, 4)}...`)
        }else{
          XaxioName.push(item.name)
        }
        baseNum.push(item.baseNum)
        orderNum.push(item.orderNum)
        orderLv.push(item.orderLv)
      })
      const colors = ['#2C61FF', '#FED602', '#ED0C51']

      let colorsList = ['#FFCC1F', '#EE32FF']
      // 定义换色数组
      let colorList = [
        ['rgba(245, 247, 250, 0)', '#2C61FF'],
        ['rgba(245, 247, 250, 0)', '#FED602'],
      ]

      let chartByaj = echarts.init(this.$refs.anjianCharts)
      let option = {
        color: [
          {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
                offset: 0, color: 'rgba(245, 247, 250, 0)' // 0% 处的颜色
            }, {
                offset: 1, color: '#2C61FF' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
                offset: 0, color: 'rgba(245, 247, 250, 0)' // 0% 处的颜色
            }, {
                offset: 1, color: '#FED602' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          '#ED0C51',
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },
            lineStyle: {
              width: 0
            }
          }
        },
        grid: {
          // right: '10%',
          left: '5%', // 固定左边刻度宽度
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          right: 0,
          textStyle: {
            color: '#fff'
          },
          data: ['部件数量', '关联案件数量', '部件案件率']
        },
        dataZoom: {
          show: false,
          startValue: 0,
          endValue: 11
        },
        xAxis: [
          {
            type: 'category',
            show: true,
            boundaryGap: true,
            axisLabel: {
              color: '#fff',
              interval: 0,
              rotate: '0',
              textStyle: {
                color: '#9EADC9'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false,
              alignWithLabel: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(4, 187, 255, 1)'
              }
            },
            data: XaxioName
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            name: '单位: %',
            scale: true,
            position: 'right',
            alignTicks: true,
            // max: 100,
            textStyle: {
              color: '#fff'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              formatter: 100
            },
            // 分割线
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(4, 187, 255, 0.2)'
              }
            }
          },
          {
            type: 'value',
            name: '单位： 件',
            scale: true,
            textStyle: {
              color: '#fff'
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              formatter: 1000
            },
            // 分割线
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#E9E9E9'
              }
            }
          }
        ],
        series: [
          {
            name: '部件数量',
            type: 'bar',
            yAxisIndex: 1,
            data: baseNum,
            barMaxWidth: 8,
            itemStyle: {
              normal: {
                barBorderRadius: [0, 0, 0, 0],
                color: function (params) {
                  return new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                    {
                      offset: 0,
                      color: colorList[0][0]
                    },
                    {
                      offset: 1,
                      color: colorList[0][1]
                    }
                  ])
                }
              }
            }
          },
          {
            name: '关联案件数量',
            type: 'bar',
            yAxisIndex: 1,
            data: orderNum,
            barMaxWidth: 6,
            itemStyle: {
              normal: {
                barBorderRadius: [0, 0, 0, 0],
                color: function (params) {
                  return new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                    {
                      offset: 0,
                      color: colorList[1][0]
                    },
                    {
                      offset: 1,
                      color: colorList[1][1]
                    }
                  ])
                }
              }
            }
          },

          //曲线
          {
            name: '部件案件率',
            type: 'line',
            data: orderLv,
            symbolSize: 1,
            ssymbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: true,
            lineStyle: {
              width: 2,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#ED0C51'
                }
              ])
            },
            itemStyle: {
              normal: {
                color: colors[4],
                borderColor: colorsList[2]
              }
            }
          }
        ]
      }

      chartByaj.setOption(option, true)
    },

    // 销毁实例
    desHander() {
      let myChart = echarts.init(this.$refs.anjianCharts)
      myChart.dispose()
    }
  }
}
</script>

<style lang="less" scoped>

</style>